<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>信息列表</title>
<%
	pageContext.setAttribute("APP_PATH",request.getContextPath());
%>
	<!--web路径 不以/开始的相对的路径，找资源，以当前资源路径为基准，经常容易出问题  
	 以/开始的相对路径，找资源，衣服武器的路径为标准(http://localhost:3306) 需要加上项目名
	 			http://localhost:3306/Anime
	 -->
	 
 	<!-- Bootstrap -->
    <link href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="${APP_PATH }/static/js/jquery-3.2.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="${APP_PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
	<!-- 搭建显示页面 -->
	<div class="container">
	<!-- 标题 -->
	<div class="row">
		<div class="col-md-12">
			<div>
				<h1>Anime-Sky</h1>
			</div>
		</div>
	</div>
	<!-- 按钮 -->
	<div class="row">
		  <div class="col-md-4 col-md-offset-8">
		  	<button type="button" class="btn btn-primary">新增</button>
		  	<button type="button" class="btn btn-danger">删除</button>
  		  </div>
	</div>
	<!-- 显示表格数据-->
	<div class="row">
		<div class="col-md-12">
			<table class="table table-striped table-bordered table table-hover">
				<tr>
					<th>#</th>
					<th>信息标题</th>
					<th>内容</th>
					<th>类别</th>
					<th>浏览</th>
					<th>评论</th>
					<th>作者</th>
					<th>来源</th>
					<th>日期</th>
					<th>操作</th>
				</tr >
				<c:forEach items="${pageInfo.list }" var="info" varStatus="vS">
				<tr>
					<th>${vS.index + 1 }</th>
					<th>${ info.infoTitle}</th>
					<th>${ info.infoContent}</th>
					<th>${ info.infoCategory}</th>
					<th>${ info.infoBnum}</th>
					<th>${ info.infoCnum}</th>
					<th>${ info.admin.adName}</th>
					<th>${ info.infoOrigin}</th>
					<th>${ info.infoDate}</th>
					<th>
						<button type="button" class="btn btn-primary" aria-label="Left Align">
  						<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
						</button>
						<button type="button" class="btn btn-danger" aria-label="Left Align">
  						<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
						</button>
					</th>
				</tr>
				</c:forEach>
			</table>
		</div>
	</div>
	<!-- 显示分页信息 -->
	<div class="row">
	<!-- 分页信息 -->
	<div class="col-md-6">
		当前第${pageInfo.pageNum }页，总共${pageInfo.pages }页,总共${pageInfo.total }记录
	</div>
	<!-- 分页条 -->
	<div class="col-md-6">
		<nav aria-label="Page navigation">
		  <ul class="pagination">
		  <li><a href="${APP_PATH }/info?pn=1">首页</a></li>
		 	 <c:if test="${pageInfo.hasPreviousPage}">
		    <li>
		      <a href="${APP_PATH }/info?pn=${pageInfo.pageNum-1 }" aria-label="Previous">
		        <span aria-hidden="true">&laquo;</span>
		      </a>
		    </li>
		    </c:if>
		    <c:forEach items="${pageInfo.navigatepageNums }" var="cpageNum">
		    
		    <!-- 如果为当前页码高亮显示 -->
		    <c:if test="${pageInfo.pageNum eq cpageNum }">
		    <li class="active"><a href="#">${cpageNum }</a></li>
		    </c:if>
		    <!-- 如果不为当前页码正常显示 -->
		    <c:if test="${pageInfo.pageNum ne cpageNum }">
		     <li><a href="${APP_PATH }/info?pn=${cpageNum }">${cpageNum }</a></li>
		    </c:if>
		   
		    </c:forEach>
		    
		    <c:if test="${pageInfo.hasNextPage }">
		    <li>
		      <a href="${APP_PATH }/info?pn=${pageInfo.pageNum+1}" aria-label="Next">
		        <span aria-hidden="true">&raquo;</span>
		      </a>
		    </li>
		    </c:if>
		    
		    <li><a href="${APP_PATH }/info?pn=${pageInfo.pages}">末页</a></li>
		  </ul>
		</nav>
	</div>

	</div>

		
	</div>
</body>
</html>